<template>
  <div id="app">
    <el-container
      v-if="menuLayoutSign"
      class="full-absolute"
      style="background: #f9f9f9; min-width: 1300px;"
    >
      <el-header style="padding: 0; height: auto;" class="el_header">
        <topNav />
      </el-header>
      <el-container
        style="overflow: hidden; margin-top: 0px; background: #eee;"
      >
        <el-aside
          :width="showTab ? '440px' : '220px'"
          style="overflow: initial; marginright: 10px;"
          class="d-flex aside"
        >
          <menuNav
            ref="topNav"
            :show-tab="false"
            mode="vertical"
            @updateShowTab="(v) => (showTab = v)"
          />
        </el-aside>

        <el-container style="overflow: hidden; background: #eee;">
          <el-header v-show="showTopBread" style="height: auto; padding: 0px;">
            <topBread />
          </el-header>
          <el-main
            v-if="initDone"
            class="flex-1 light-little-scroll"
            style="padding: 6px 10px 10px; height: 100%; background: #eee;"
          >
            <!-- v-show="currentIsIframe" -->
            <template>
              <viewIframe
                v-for="frameItem in iframeTabList"
                v-show="$route.query.path === frameItem.query.path"
                :key="frameItem.query.path"
                :path="frameItem.query.path"
              />
              <repeatPage
                v-for="page in repeatPageList"
                v-show="$route.fullPath === page.fullPath"
                :key="page.fullPath"
                :component="page.query.component || page.name"
                :query="page.query"
              />
            </template>
            <template>
              <keep-alive :include="activeNavTab">
                <router-view v-if="isNormalPage" />
                <!-- 投诉 TODO -->
                <!-- <router-view v-if="!currentIsIframe&&isRouterAlive" /> -->
              </keep-alive>
            </template>
          </el-main>
        </el-container>
      </el-container>
    </el-container>

    <router-view v-else />

    <template v-for="item in globalComponentList">
      <div :is="item.component" :key="item.key" />
    </template>
    <elImageViewer
      v-if="imageView"
      :initial-index="imageIndex"
      :on-close="closeViewer"
      :url-list="imageList"
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import _ from "lodash";
import viewIframe from "./views/iframe/iframe";
import repeatPage from "./views/repeatPage/repeatPage";
import topNav from "@components/topNav/topNav";
import menuNav from "@components/menuNav/menuNav";
import topBread from "@components/topBread/topBread";
import commonmenus from "@/components/menuNav/commonmenus.vue";
import { getTokenInfo } from "@utils/session";

const priviewMixin = {
  data() {
    return {};
  },
  computed: {
    imageView() {
      return this.$store.state.global.imageView;
    },
    imageList() {
      const list = this.$store.state.global.imageInfo.list;
      return list;
    },
    imageIndex() {
      const { src, list } = this.$store.state.global.imageInfo;
      if (!src) {
        return 0;
      } else {
        return list.indexOf(src);
      }
    },
  },
  methods: {
    closeViewer() {
      this.$store.commit("global/CLOSE_IMAGE");
    },
    basemenuclick() {
      this.basemenudialog = !this.basemenudialog;
    },
  },
};
export default {
  components: {
    topNav,
    viewIframe,
    menuNav,
    topBread,
    commonmenus,
    repeatPage,
  },
  mixins: [priviewMixin],
  provide() {
    return {
      removeRoute: this.removeRoute,
      pushRoute: this.pushRoute,
      removeAll: this.removeAll,
      removeOther: this.removeOther,
      reload: this.reload,
    };
  },
  data() {
    return {
      initDone: false,
      showTab: false,
      basemenudialog: false,
      isRouterAlive: true,
      fullScreen: false, // 是否全屏
    };
  },
  computed: {
    menuLayoutSign() {
      return !_.get(this.$route, "meta.specialLayout") && !this.fullScreen;
    },
    globalComponentList() {
      const out = [];

      const componentMap = this.$store.state.global.componentMap;

      Object.keys(componentMap).forEach((key) => {
        out.push(componentMap[key]);
      });

      return out;
    },
    navTabList() {
      return this.$store.state.global.navTabList;
    },
    iframeTabList() {
      return this.navTabList.filter((v) => v.name === "iframe");
    },
    // 需要重复展示在tab页的页面比如工单详情页面，传入不同的id要都能在tab页展示出来
    repeatPageList() {
      const arr = this.navTabList.filter((v) => {
        if (v.repeatPage) {
          return v.repeatPage;
        }
      });
      return arr;
    },
    // 是否是正常路由页面
    isNormalPage() {
      const name = this.$route.name;
      const meta = this.$route.meta || {};
      if (name === "iframe" || meta.repeatPage) {
        return false;
      }
      return true;
    },
    currentIsIframe() {
      return this.$route.name === "iframe";
    },
    activeNavTab() {
      // return this.navTabList.filter(item => {
      //     return item.meta.keepAlive;
      // })
      const arr = this.navTabList.filter((item) => {
        return item.meta.keepAlive;
      });

      // 页面组件必须有name值，否则不能被缓存
      return arr
        .map((item) => {
          if (item.name) {
            return item.name;
          } else {
            const name = _.get(item, "matched[0].name");
            if (name) {
              return name;
            }
          }
        })
        .filter((v) => Boolean(v));
      // .join(",");
    },
    showTopBread() {
      return true;
    },
  },
  created() {
    let search = location.href.split("?")[1] || "";
    search = new URLSearchParams("?" + search);
    this.fullScreen = search.get("fullScreen");
  },
  async mounted() {
    window.removeRoute = this.removeRoute; // 删除1个route
    window.pushRoute = this.pushRoute; // 新增1个route
    window.removeAll = this.removeAll; //
    window.removeOther = this.removeOther; //
    window.windowGoback = this.windowGoback;
    // 获取token
    window.getToken = () => {
      return getTokenInfo();
    };
    // 获取用户信息
    window.getUserInfo = () => {
      return this.$store.state.account.accountObject;
    };
    // 获取权限信息
    window.getUserAuths = () => {
      let authRightButton = this.$store.state.account.buttonAuth || {};
      let menuList = this.$store.state.account.menuList;
      return {
        authRightButton,
        menuList,
      };
    };
    let lastloginStaffId = null;

    try {
      lastloginStaffId = localStorage.getItem("lastStaffId");
    } catch (error) {
      // nothing
    }
    await this.$store.dispatch("account/init");

    this.initDone = true;

    try {
      const thisStaffId = _.get(
        this.$store,
        "state.account.accountObject.staffId"
      );

      const isLastLoginAccount =
        !lastloginStaffId ||
        (lastloginStaffId && lastloginStaffId === thisStaffId);

      let cacheNavTabList = localStorage.getItem("cacheNavTabList");

      cacheNavTabList = JSON.parse(cacheNavTabList);

      if (isLastLoginAccount && cacheNavTabList && cacheNavTabList.length) {
        this.$store.commit("global/SET_NAV_TAB_LIST", cacheNavTabList);
      }
    } catch (error) {
      console.log(error);
    }

    this.$store.commit("global/SET_NAV_TAB_LIST_REALTIME", true);
  },
  methods: {
    positionsClick() {
      this.showTab = !this.showTab;
      console.log(this.showTab);
    },
    windowGoback(fullPath) {
      //子iframe组件返回
      this.$tool.goback(this);
    },
    removeRoute(fullPath = this.$route.fullPath) {
      const ref = this.$refs.topNav;
      ref && ref.removeRoute(fullPath);
    },

    pushRoute(fullPath) {
      const ref = this.$refs.topNav;
      ref && ref.pushRoute(fullPath);
    },
    removeAll() {
      const ref = this.$refs.topNav;
      ref && ref.removeAll();
    },
    removeOther(...reset) {
      const ref = this.$refs.topNav;
      ref && ref.removeOther(...reset);
    },
    reload() {
      // 移除缓存的组件
      this.activeNavTab.splice(this.activeNavTab.indexOf(this.$route.name), 1);
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.logo {
  width: 200px;
  height: 36px;
  margin: 4px;
  background-image: url(./assets/images/logo.png);
  background-size: contain;
}
.aside {
  position: relative;
  overflow: hidden;
}
.toggleIcon {
  width: 10px;
  height: 44px;
  position: absolute;
  // right: 0px;
  right: -12px;
  top: 0;
  // transform: translateY(-25px);
  cursor: pointer;
  // background: #cdd2db;
  display: flex;
  align-items: center;
  justify-content: center;
  .toggle_icon_wrap {
    background: #fff;
    height: 25px;
    line-height: 25px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    &:hover {
      background: #e3e3e3;
    }
  }
}
.positions-left {
  transform: translateY(-25px);
}
.positions-right {
  transform: rotate(180deg) translateY(25px);
}
// .menunav {
//     display: flex;
//     align-items: center;
//     height: 50px;
//     // background: repeating-linear-gradient(to right, #fff, #e9f1fc);
//     background-color: green;
// }
.tomMenuWrapper {
  display: flex;
  justify-content: space-between;
}
.rightmenu {
  width: 246px;
  background-color: #fff;
}
.yewu {
  width: 14px;
  height: 14px;
  background-image: url("./assets/images/yewuicon.png");
  background-size: contain;
  margin-right: 3px;
  cursor: pointer;
}
.zsk {
  width: 14px;
  height: 14px;
  background-image: url("./assets/images/zskicon.png");
  background-size: contain;
  margin-right: 3px;
  cursor: pointer;
}
.basemenu {
  width: 14px;
  height: 14px;
  background-image: url("./assets/images/basemenuicon.png");
  background-size: contain;
  margin-right: 3px;
  cursor: pointer;
}
.rightmenusapn {
  cursor: pointer;
  font-size: 12px;
  color: #005fb3;
}
.basemenudialog {
  height: 50px;
  background-color: aquamarine;
}
.el_header {
  box-shadow: -2px -2px -2px -1px rgba(0, 0, 0, 0.8) !important;
}
</style>
